<template>
    <div class="newstart">
        <div class="container">
            <div class="header">
                <Head :title="celi"></Head>
            </div>
        </div>
        <div class="StaCab">
            <el-tag type="info" class="eltag">站点选择</el-tag>
            <el-select v-model="StaionId" placeholder="Station" style="width: 100px">
                <el-option v-for="item in Station" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" />
            </el-select>
            <el-tag type="info" class="eltag">柜子选择</el-tag>
            <el-select v-model="CabinetId" multiple placeholder="Select" style="width: 300px">
                <el-option v-for="item in Cabinet" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="demo-collapse">
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="启动控制" name="1" class="Collfont">
                    <div>
                        <Ctrl :Sval="StaionId" :Cval="CabinetId" ></Ctrl>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="运行模式" name="2" class="Collfont">
                    <div>
                        <runmode :Sval="StaionId" :Cval="CabinetId"></runmode>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="安全保护" name="3" class="Collfont">
                    <div>
                        <safe :Sval="StaionId" :Cval="CabinetId"></safe>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="策略" name="4" class="Collfont">
                    <div class="policyhead">
                        <el-button type="primary">下发策略</el-button>
                    </div>
                   
                    <el-collapse-item title="策略1" name="5" class="Collfont">
                        <div>
                            <policy></policy>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="策略2" name="6" class="Collfont">
                        <div>
                            <policy></policy>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="策略3" name="7" class="Collfont">
                        <div>
                            <policy></policy>
                        </div>
                    </el-collapse-item>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script setup>

import { ref } from 'vue'

import Head from '../components/Head.vue';
import Ctrl from '../components/ctrl.vue'
import Runmode from '@/components/runmode.vue';
import safe from '@/components/safe.vue';
import policy from '@/components/policy.vue';


 const handleChange = function(key, status) {
    console.log(StaionId.value, CabinetId.value);
  };
const celi = "策略控制管理"
const StaionId = ref()
const CabinetId = ref()
const Cabinet = [{
    value: '1',
    label: '柜子1',
}, {
    value: '2',
    label: '柜子2',
},
{
    value: '3',
    label: '柜子3',
},
{
    value: '4',
    label: '柜子5',
},
{
    value: '5',
    label: '柜子5',
},
{
    value: '6',
    label: '柜子6',
},
{
    value: '7',
    label: '柜子7',
},
{
    value: '8',
    label: '柜子8',
},
{
    value: '9',
    label: '柜子9',
},
{
    value: '10',
    label: '柜子10',
},
{
    value: '255',
    label: '全部',
}
];
const Station = [
    {
        value: '1',
        label: '站点1',
    },
    {
        value: '2',
        label: '站点2',
    },
    {
        value: '3',
        label: '站点3',
    }, {
        value: '255',
        label: '全部',
    }
]

</script>

<style scoped>
/* Your CSS styles here */
.StaCab{
    margin: auto;
    width: 50%;
}

.policyhead{
    margin: auto;
    width: 50%;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    background-color: #555;
}

.header {
    flex: 1;
    height: 10vh;
    width: 100vh;
    background-color: #4d8bb4;
    color: #fff;
    text-align: center;
    padding-top: 2vh;
    font-size: 40px;
}

.Menu {

    background-color: #444;
    color: #fff;
    overflow-y: auto;
}

.Content {
    flex: 1;
    background-color: #333;
    color: #fff;
    padding: 20px;
    overflow-y: auto;
    font-size: 20px;
    text-align: center;
}

.eltag {
    margin: 20px;
    width: 100px;
    height: 30px;
    font-size: 15px;
    color: white;
    background-color: rgb(64, 158, 255);
}

.Collfont {
    font-size: 30px;
}
</style>